<template>
    <div class='body'>
        <div class="main">
            <div class="top">
                <span style="color: tomato;">请仔细输入下列表单内容！</span>输入完毕之后点击右侧创建进行创建投票 →
                <el-button type="primary" @click="upchuang" style="margin-left: 500px; width: 200px;">点击创建</el-button>
            </div>
            <div class="bom">
                <div class="neir">
                    <div class="title">
                        <span> 投票标题：</span>
                        <el-input v-model="toudata.title" style="width: 240px" placeholder="请输入标题" />
                    </div>
                    <div class="title">
                        <span>投票介绍：</span>
                        <el-input v-model="toudata.jie" show-word-limit maxlength="110" rows="4" resize="none"
                            :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" style="width: 240px"
                            placeholder="请输入描述" />
                    </div>


                </div>

                <div class="bomx1">
                    <el-upload class="avatar-uploader" :show-file-list="false" :on-change="upload">
                        <img v-if="valueinput" :src="valueinput" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <span><el-input v-model="keyinput" style="width: 178px" placeholder="选项内容" /></span>
                    <el-button type="primary" @click="tjxx">添加</el-button>
                    <div class="demo-date-picker">
                        <div class="block">
                            <el-date-picker v-model="toudata.timevalue" type="daterange" range-separator="To"
                                start-placeholder="Start date" end-placeholder="End date" size="small" />
                        </div>

                    </div>
                </div>

                <div class="xuanxiang" v-if="toudata.xuan">
                    <div v-for="(value, key, index) in toudata.xuan" class="xuanbox">
                        <img v-if="toudata.xuan[key]" :src="toudata.xuan[key]" class="avatar" />
                        <img v-else src="/tou.jpg" class="avatar" />
                        <span>{{ key }}</span>
                    </div>
                </div>
            </div>


        </div>
    </div>
</template>
<script setup lang='ts'>
import { additem } from '@/api/info/index'
import moment from 'moment';
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { useCountStore } from "@/store/count";
const qxstore = useCountStore()
const open4 = (data?: any) => {
    if (data) {
        ElMessage.error(data)
    } else {
        ElMessage.error('Oops, this is a error message.')
    }
}
onMounted(() => {
    // infodata().then((res: any) => {
    //     console.log('日志', res)
    //     res.data.forEach((item: any) => {
    //         item.loginTime = moment(item.loginTime).format('YYYY-MM-DD HH:mm:ss'); // 格式化为"年-月-日 时:分:秒"
    //     });
    //     tableData.value = res.data.reverse()
    // })

    // 获取当前时间
    // const loginTime1 = new Date();
    // let aaa = moment(loginTime1).format('YYYY-MM-DD HH:mm:ss');
    // console.log("aaaa", aaa);


})
let toudata: any = reactive({
    id: "",
    title: "",
    jie: "",
    xuan: {},
    timevalue: []
})
toudata.id = qxstore.id
let keyinput: any = ref()
let valueinput: any = ref()
// 选项头像
const upload = (rawFile: any) => {
    console.log("aaaaa", rawFile);
    const reader = new FileReader();
    reader.readAsDataURL(rawFile.raw);
    reader.onload = (e: any) => {
        // 当文件读取成功时，将base64数据返回或进行其他处理
        valueinput.value = e.target.result;
    };
}
let num = ref(0)
let tjxx = () => {

    if (num.value < 13) {
        toudata.xuan[keyinput.value] = valueinput.value
        console.log(toudata.xuan[keyinput.value]);
        num.value++
        const loginTime1 = new Date(toudata.timevalue[0]);
        let aaa = moment(loginTime1).format('YYYY-MM-DD HH:mm:ss');
        console.log("aaaa", aaa);
    } else {
        open4("最多13个选项")
    }

}
// 创建接口
let upchuang = () => {
    toudata.id = qxstore.id
    for (const key in toudata) {
        if (toudata[key] == "") {
            if (num.value == 0) {
                open4("至少添加一个投票选项")
                return
            } else {
                open4("请填写完整" + key + "字段未填写")
                return
            }
        }
    }
    additem(toudata).then(res => {
        console.log(res);
        if (res.data.msg == "创建成功") {

        }
    })

}
</script>
<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
<style  lang='less'>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.body {
    background-color: rgb(245, 249, 250);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .main {
        width: 80%;
        height: 95%;
        // background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        .top {
            width: 100%;
            height: 10%;
            background-color: #fff;
            box-sizing: border-box;
            padding: 10px 0px 10px 25px;
            display: flex;
            align-items: center;
        }

        .bom {
            width: 100%;
            height: 89%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background-color: #fff;
            box-sizing: border-box;
            padding-top: 25px;
            padding-left: 10px;

            .neir {
                width: 100%;
                height: 125px;
                display: flex;
                flex-direction: column;
                align-items: center;

                .title {
                    display: flex;
                    align-items: center;
                }
            }

            .bomx1 {
                width: 100%;
                height: 250px;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .xuanxiang {
                width: 100%;
                height: 295px;
                display: flex;
                align-items: center;
                flex-wrap: wrap;

                .xuanbox {
                    width: 78px;
                    height: 100px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-between;
                    margin: 10px 11px;

                    .avatar {
                        width: 78px;
                        height: 78px;
                    }
                }

            }
        }
    }
}
</style>